<template>
	<view>
		<view class="flex_between hb_type" @click.stop="close">
			<view class="hb_type_item" :class="{'hb_type_item_ac':current==1}" @click="changeType(1)">发出的红包</view>
			<view class="hb_type_item" :class="{'hb_type_item_ac':current==2}" @click="changeType(2)">收到的红包</view>
		</view>
		<view class="hb_info" @click.stop="close">
			<image :src="info.member_info.avatar"></image>
			<view class="hb_tit" v-show="current==1">{{info.member_info.nickname}}共发出</view>
			<view class="hb_tit" v-show="current==2">{{info.member_info.nickname}}共收到</view>
			<view class="hb_price">{{info.hb_total_amount}}</view>
			<view class="hb_num" v-show="current==1">发出红包<text>{{info.hb_total_num}}</text>个</view>
			<view class="hb_num" v-show="current==2">收到红包<text>{{info.hb_total_num}}</text>个</view>
			<!-- <view class="flex_between" v-show="current==2">
				<view class="hb_tj">
					<view class="hb_tj_tit">{{info.hb_total_num}}</view>
					<view>收到红包</view>
				</view>
				<view class="hb_tj">
					<view class="hb_tj_tit">1</view>
					<view>手气最佳</view>
				</view>
			</view> -->
		</view>
		<view class="hb_list" @click.stop="close">
			<view class="flex_between hb_item" v-for="(item,index) in list">
				<image class="hb_logo" v-if="current==2" :src="item.avatar"></image>
				<view class="hb_it_content" @click="current==2 ? '' : $navTo('/pages/user/hbdetail?id='+item.id)" :class="{'w100':current==2,'width100':current==1&&(item.has_num==item.num||item.is_finished==1)}">
					<view class="flex_between hb_item_tit">
						<view class="clamp" v-if="current==1">{{item.title}}</view>
						<view class="clamp" v-else>{{item.nickname}}</view>
						<view class="text-right">{{item.amount}}元</view>
					</view>
					<view class="flex_between hb_item_status">
						<view v-if="current==2" class="clamp">{{item.title}}</view>
						<view :class="{'text-right':current==2}">{{item.create_time}}</view>
						<view class="text-right" v-show="current==1">
							<block v-if="item.has_num==item.num">已领完 {{item.has_num}}/{{item.num}}个</block>
							<block v-else>
								<text v-if="item.is_finished==1">已过期</text>
								<text v-else>已领 {{item.has_num}}/{{item.num}}个</text>
							</block>
						</view>
					</view>
				</view>
				<view class="openshare" v-show="current==1&&item.has_num!=item.num&&item.is_finished!=1" @click.stop="openshare(item.id,index)">
					<image src="https://img.jinghushi.com/images/9/2024/12/iI3yAwI3vMmYy7YB3kW3SUIYOZk78Z.png" mode="widthFix"></image>
				</view>
				<view class="flex_evenly share_list" v-show="current==1&&curindex==index">
					<!-- <view class="share_one" @click.stop="openHb">
						<image src="https://img.jinghushi.com/images/9/2024/12/l08vhcvcivh4DJKK8vvkSSJc0VcHiv.png"></image>
						<image style="display: none;" src="https://img.jinghushi.com/images/9/2024/12/S7n61siT56rbq8NXiXtV1rRDi9z61q.png"></image>
					</view>
					<view class="share_line"></view> -->
					<view class="share_two">
						<button class="share_type_it" open-type="share" type="default">
							<image src="https://img.jinghushi.com/images/9/2024/12/bgUS7JiS41iUz4GAy1FYuifCsyS47F.png"></image>
						</button>
					</view>
					<!-- <view class="share_close" @click.stop="close">
						<uni-icons type="closeempty" color="#666" size="14"></uni-icons>
					</view> -->
				</view>
			</view>
		</view>
		<view class="empty_loading">
			<image v-if="isloading" src="/static/business/loading.gif" ></image>
			<text v-if="isempty">没有更多了~</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				isloading: false,
				isempty: false,
				page: 0,
				list: [],
				info: [],
				curindex:-1,
				url: 'redpacket/lists',
				isshare: 0
			};
		},
		onLoad(options){
			this.getList();
			if(options.isshare){
				this.isshare = options.isshare
			}
		},
		onReachBottom() {
			this.getList();
		},
		methods:{
			changeType(id){
				if(id==this.current) return;
				this.current = id;
				this.curindex = -1;
				this.page = 0;
				this.list = [];
				if(id==1){
					this.url = 'redpacket/lists';
				}else{
					this.url = 'redpacket/receiveLog';
				}
				this.getList();
			},
			getList(){
				this.page++;
				this.isloading = true;
				this.isempty = false;
				this.$axios(this.url,'POST','member',{
					page: this.page
				}).then(res=>{
					this.isloading = false;
					if(res.data.code == 200){
						this.info = res.data.data;
						this.list = [...this.list,...res.data.data.hb_list];
						this.isempty = res.data.data.hb_list.length <= 0;
						if(this.isshare==1){
							this.isshare = 0;
							this.curindex = 0;
							this.openshare(this.list[0].id,0);
						}
					}
				})
			},
			openshare(id,index){
				this.curindex = index;
				// 获取分享地址
				this.$axios('WxInfo/getConfig', 'POST', 'shop', {
					url: '/pages/user/hb',
					type: 'redpacket',
					cid: id
				}).then(res => {
					if (res.data.code == 200) {
						if(res.data.data.shareinfo.title){
							this.sharePubtitle = res.data.data.shareinfo.title;
						}
						this.sharepath = res.data.data.shareinfo.url;
						this.sharequery = res.data.data.shareinfo.url.split('?')[1];
						this.shareimageUrl = res.data.data.shareinfo.imgurl;
					}
				})
			},
			openHb(){
				
			},
			close(){
				this.curindex = -1;
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 80rpx;
		background: #ededed;
	}
.hb_type{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	border-radius: 60rpx;
	justify-content: space-evenly;
	height: 100rpx;
	border: 2rpx solid #eee;
	z-index: 99;
	.hb_type_item{
		width: 38%;
		text-align: center;
		line-height: 60rpx;
		background: #ededed;
		border-radius: 60rpx;
		border: 2rpx solid #eee;
	}
	.hb_type_item_ac{
		background: #e1604c;
		color: #fff;
		border: 2rpx solid goldenrod;
	}
}
.hb_info{
	margin-top: 100rpx;
	text-align: center;
	padding: 100rpx 20rpx;
	background: #ededed;
	image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}
	.hb_tit{
		font-size: 30rpx;
		margin: 40rpx 0;
	}
	.hb_price{
		font-size: 70rpx;
		font-weight: bold;
		margin: 20rpx 0;
		font-family: cursive;
	}
	.hb_num{
		font-size: 32rpx;
		text{
			color: #c0a777;
			margin: 0 10rpx;
		}
	}
	.hb_tj{
		width: 50%;
		text-align: center;
		color: #5e5e5e;
		.hb_tj_tit{
			font-size: 60rpx;
			margin: 10rpx 0;
			font-family: cursive;
		}
	}
}
.hb_list{
	background: #fff;
	padding: 0 20rpx;
	.hb_item{
		padding: 20rpx 0;
		border-bottom: 2rpx solid #eee;
		position: relative;
		.hb_it_content{
			width: calc(100% - 50rpx);
		}
		.w100{
			width: calc(100% - 80rpx);
			padding-left: 10rpx;
		}
		.width100{
			width: 100%;
		}
		.hb_logo{
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
		}
	}
	.hb_item_tit{
		view{
			width: 50%;
		}
	}
	.hb_item_status{
		font-size: 26rpx;
		color: #666;
		margin-top: 6rpx;
		view{
			width: 50%;
		}
	}
	.openshare{
		width: 70rpx;
		text-align: center;
		image{
			width: 12rpx;
		}
	}
	.share_list{
		position: absolute;
		right: 40rpx;
		bottom: 96rpx;
		background: #eee;
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
		.share_one{
			height: 28rpx;
			image{
				width: 56rpx;
				height: 28rpx;
			}
		}
		.share_line{
			background: #ccc;
			height: 28rpx;
			width: 2rpx;
			margin: 0 20rpx;
		}
		.share_two{
			height: 28rpx;
			image{
				width: 88rpx;
				height: 28rpx;
			}
		}
		.share_close{
			position: absolute;
			right: 0;
			top: -16rpx;
		}
		.share_type_it{
			height: 36rpx;
			background: transparent;
			line-height: 1;
			padding: 0;
			&::after{
				border: none;
			}
		}
	}
}
</style>
